<template>
  <div class="trafficpage secondary-page-mode">
    <div class="secondary-toolbar">
           <span>站点选择 : </span>
           <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
           <span>时间选择 : </span>
            <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期"
              end-placeholder="结束日期"></el-date-picker>
           </div>&emsp;&emsp;
           <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
           <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
          <el-table border :data="tableData">
                  <el-table-column
                      type="index"
                      label="序号"
                      fixed
                      width="50">
                  </el-table-column>
                  <el-table-column
                      prop="mn"
                      fixed
                      width='185'
                      label="MN号">
                  </el-table-column>
                  <el-table-column
                      fixed
                      prop="stationname"
                      label="站点名称">
                  </el-table-column>
                  <el-table-column
                      prop="status"
                      fixed
                      label="实时状态"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="time"
                      label="最近上线时间"
                      width="200">
                  </el-table-column>
                  <el-table-column
                      prop="logtime"
                      label="在线时长(分钟)"
                      width="200">
                  </el-table-column>
                  <el-table-column
                      prop="offtime"
                      label="离线时长(分钟)"
                      width="200">
                  </el-table-column>
                  <el-table-column
                      prop="offcs"
                      label="离线次数"
                      width="200">
                  </el-table-column>
                  <el-table-column
                      prop="allb"
                      label="累计流量(B)"
                      width="200">
                  </el-table-column>
                   <el-table-column
                      label="详情"
                      width="100">
                      <el-button type="secondBtn" @click="detailClick">详情</el-button>
                  </el-table-column>
          </el-table>
    </div>
    <el-dialog :visible.sync="visiDialog"  width="900px" title="兰溪大桥通讯状态统计" :before-close="closess">
      <div class="dialogcontent">
        <div class="toolbox">
           <span>时间选择 : </span>
           <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期"
              end-placeholder="结束日期"></el-date-picker>
           </div>&emsp;&emsp;
           <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
        </div>
        <div class="table">
           <el-table border :data="tableData" height="240">
                  <el-table-column
                      type="index"
                      label=""
                      width="40">
                  </el-table-column>
                  <el-table-column
                      prop="stationname"
                      label="站点名称">
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="日期"
                      width="150">
                  </el-table-column>
                  <el-table-column
                      prop="logtime"
                      label="在线时长(分钟)"
                      width="130">
                  </el-table-column>
                  <el-table-column
                      prop="offtime"
                      label="离线时长(分钟)"
                      width="130">
                  </el-table-column>
                  <el-table-column
                      prop="offcs"
                      label="离线次数"
                      width="130">
                  </el-table-column>
                  <el-table-column
                      prop="allb"
                      label="累计流量(B)"
                      width="130">
                  </el-table-column>
          </el-table>
        </div>
        <div class="echartbox" id="echartbox"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value:'',
      optionData: [{ value: 1, label: "在线" }, { value: 2, label: "离线" }],
      dateRange: "", //页面时间的v-model
      dialogdateRange: "", //弹框内时间v-model
      visiDialog: false, //弹出框显示隐藏控制
      tableData: [
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        }
      ]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  },
  mounted(){
     
  },
  methods: {
    selectChange() {},
    detailClick() {
        this.visiDialog=true;
        setTimeout(()=>{
            this.initEchart()
        },100)
    },
    closess(done) {
      done();
    },
    initEchart() {
      var colors = ["#5793f3", "#d14a61", "#675bba"];
      var option = {
        color: colors,
        title: {
          text: '通信状态统计图'
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          bottom:'20',
          top:'45'
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["累计流量", "在线时长", "掉线时长"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisTick: {
              alignWithLabel: true
            },
            data: [
              "2019/02/16 0时",
              "2019/02/18 0时",
              "2019/02/20 0时",
              "2019/02/22 0时",
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            position: "left",
            axisLine: {
              lineStyle: {
                color: '#1a1a1a'
              }
            },
          },
          {
            type: "value",
            position: "right",
            axisLine: {
              lineStyle: {
                 color: '#1a1a1a'
              }
            },
          },
        ],
        series: [
          {
            name: "累计流量",
            type: "line",
            data: [
              10000000,
              8000000,
              400000,
              100000,
            ]
          },
          {
            name: "在线时长",
            type: "line",
            yAxisIndex: 1,
            data: [
              1500,
              1200,
              600,
              200,

            ]
          },
          {
            name: "掉线时长",
            type: "line",
            yAxisIndex: 1,
            data: [
              0,
              0,
              0,
              0,
            ]
          }
        ]
      };
      //初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echartbox'));

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="less">
.dialogcontent {
  padding: 5px;
  padding-bottom: 25px;
  .echartbox {
    height: 200px;
  }
}
</style>
